<template>
  <div class="common-layout main-bg">
    <el-container>
      <el-header class="main-header">
        <div class="header-time">{{ currentTime }}</div>
        <div class="header-title">
          <el-button @click="dialogFormVisible = true"><el-icon>
              <Message />
            </el-icon></el-button>
          WMS系统--2组
        </div>
        <div class="header-right">
          <el-avatar :size="32" :src="userAvatar" style="margin: 0 10px" />
          <span class="username">{{ username }}</span>
          <el-button type="danger" size="small" @click="logout" style="margin-left: 16px">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" style="background-color: #f5f5f5">
          <el-menu active-text-color="#ffd04b" background-color="transparent" class="el-menu-vertical-demo"
            :default-active="activeMenu" text-color="#fff" router>
            <el-menu-item index="/Main">
              <el-icon>
                <House />
              </el-icon>
              <span disabled>仪表板</span>
            </el-menu-item>

            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Box />
                </el-icon>
                <span>货品管理-1-王晨宇</span>
              </template>
              <el-menu-item index="/Goods">货品列表-1</el-menu-item>
              <el-menu-item index="/AddGoods">新增货品-1</el-menu-item>
              <el-menu-item index="/GetGoodsType">货品类型-1</el-menu-item>
              <el-menu-item index="/Allocate">调拨管理-1</el-menu-item>
             
            </el-sub-menu>
             <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <Box />
                </el-icon>
                <span>数据预测-1-王晨宇</span>
              </template>
              <el-menu-item index="/Prediction">数据预测</el-menu-item>
             
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Upload />
                </el-icon>
                <span>出入库管理-2-付林豪</span>
              </template>
              <el-menu-item index="/InWareHouse">入库管理-2</el-menu-item>
              <el-menu-item index="/OutWareHouse">出库管理-2(暂未实现)</el-menu-item>
              <el-menu-item index="/IOWareHouse">出入库记录管理-2</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <House />
                </el-icon>
                <span>仓库管理-3-刘淑娟</span>
              </template>
              <el-menu-item index="/Warehouse">仓库管理-3</el-menu-item>
              <el-menu-item index="/ReviewModel">库存盘点-3</el-menu-item>
              <!-- <el-menu-item index="3-3">库存冻结-3</el-menu-item>
              <el-menu-item index="3-4">移库管理-3</el-menu-item>  -->
            </el-sub-menu>

            <!-- <el-sub-menu index="4">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>基础设置-1</span>
              </template>
              <el-menu-item index="4-1">商品管理-1</el-menu-item>
              <el-menu-item index="4-2">客户管理-1</el-menu-item>
              <el-menu-item index="4-3">仓库管理-1</el-menu-item>
              <el-menu-item index="4-4">协议价格-1</el-menu-item>
            </el-sub-menu> -->
            <!-- <el-sub-menu index="6">
              <template #title>
                <el-icon><Histogram /></el-icon>
                <span>统计报表-4</span>
              </template>
              <el-menu-item index="6-1">出入库流水-4</el-menu-item>
              <el-menu-item index="6-2">入库流水-4</el-menu-item>
              <el-menu-item index="6-3">出库流水-4</el-menu-item>
              <el-menu-item index="6-4">盘点统计-4</el-menu-item>
              <el-menu-item index="6-5">挑拨统计-4</el-menu-item>
              <el-menu-item index="6-6">库存分布-4</el-menu-item>
              <el-menu-item index="6-7">仓库汇总-4</el-menu-item>
              <el-menu-item index="6-8">出入库类型汇总-4</el-menu-item>
            </el-sub-menu> -->
            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <Promotion />
                </el-icon>
                <span>台账管理-4-孙林燕</span>
              </template>
              <el-menu-item index="/Inventory">库存查询-4</el-menu-item>
              <el-menu-item index="/GetGoods_Times">保质期查询-4</el-menu-item>
              <el-menu-item index="/Pici">批次查询-4</el-menu-item>
              <el-menu-item index="/Tablelists">报表-4</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <Shop />
                </el-icon>
                <span>销售管理-2-付林豪</span>
              </template>
              <el-menu-item index="/InWareHouseGoods">库内商品-2</el-menu-item>
              <el-menu-item index="/ReturnGoods">销售退货管理-2</el-menu-item>
            </el-sub-menu>

          </el-menu>
        </el-aside>
        <!-- 客服按钮 -->
        <!-- <el-button
          class="contact-service-btn"
          type="primary"
          @click="contactService"
          >联系客服</el-button
        > -->

        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
  <el-dialog v-model="dialogFormVisible" title="更新日志" width="800"><el-timeline style="max-width: 600px">
      <el-timeline-item v-for="item in WMSLogs" :timestamp="moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss')"
        placement="top">
        <el-card>
          <h3>{{ item.title + "--" + item.version }}</h3>
          <p>
            {{ item.content }}
            <br />
          <h4>附件：</h4>
          <img :src="item.files" width="300px" />
          </p>
        </el-card>
      </el-timeline-item>


    </el-timeline>
    <el-button @click="handleCloseDialog">关闭，今日不再弹出</el-button></el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { RouterView } from "vue-router";
import {
  Menu as IconMenu,
  House,
  Box,
  Upload,
} from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import service from "@/utils/request";
import moment from "moment";
const route = useRoute();
const router = useRouter();
const activeMenu = ref("/Main");

const username = ref("");
const userAvatar = ref("https://api.dicebear.com/7.x/miniavs/svg?seed=User");
const currentTime = ref("");
let timer: number | undefined;

const WMSLogs = ref([{
  updateDate: "",
  version: "",
  title: "",
  content: "",
  files: ""
}])

const GetUpdateLogs = () => {
  service.get("/api/app/w-mSUpdate-log/w-mSUpdate-log-list").then(res => {
    if (res.data.code == 200) {
      WMSLogs.value = res.data.resultData
    }
  });
}


const updateTime = () => {
  const now = new Date();
  const pad = (n: number) => n.toString().padStart(2, "0");
  currentTime.value = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(
    now.getDate()
  )} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
};

onMounted(() => {
  GetUpdateLogs()
  // 获取登录人名称（优先userInfo.userName）
  const userInfoStr = localStorage.getItem("userInfo");
  if (userInfoStr) {
    try {
      const userInfo = JSON.parse(userInfoStr);
      username.value = userInfo.userName || "用户";
    } catch {
      username.value = "用户";
    }
  } else {
    username.value = "用户";
  }
  // 设置默认菜单
  activeMenu.value = route.path || "/Main";
  updateTime();
  timer = setInterval(updateTime, 1000);
  //dialogFormVisible.value = true;

  const logShowFlag = +(localStorage.getItem("logShowFlag") || 0);
  
  // 只有当 logShowFlag 为 1 时才显示弹窗
  if (logShowFlag === 1) {
    showUpdateLogDialog();
  }


});

// 显示弹窗的方法
const showUpdateLogDialog = async () => {
  await GetUpdateLogs();
  dialogFormVisible.value = true;
};

// 关闭弹窗并记录今天已显示
const handleCloseDialog = () => {
  dialogFormVisible.value = false;
  // 关闭后设置为已显示状态，确保当天不再显示
  localStorage.setItem("logShowFlag", "2");
};


onUnmounted(() => {
  if (timer) clearInterval(timer);
});
const logout = () => {
  localStorage.removeItem("rememberedUser");
  localStorage.removeItem("userInfo");
  ElMessage.success("已退出登录");
  router.replace("/");
};

const handleSelect = (key: string) => {
  // 根据菜单key跳转到对应页面
  activeMenu.value = key;
  if (key === "/Main") {
    router.push("/Main");
  } else if (key.startsWith("1-")) {
    // 入库管理相关页面
    console.log("入库管理:", key);
  } else if (key.startsWith("2-")) {
    // 出库管理相关页面
    console.log("出库管理:", key);
  } else if (key.startsWith("3-")) {
    // 仓库管理相关页面
    console.log("仓库管理:", key);
  } else if (key.startsWith("4-")) {
    // 基础设置相关页面
    console.log("基础设置:", key);
  } else if (key.startsWith("5-")) {
    // 财务管理相关页面
    console.log("财务管理:", key);
  }
};


//弹出日志
const dialogFormVisible = ref(false)

</script>

<style scoped>
/* .main-bg {
  min-height: 100vh;
  height: 100vh;
  background: url('https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=1500&q=80') no-repeat center center fixed;
  background-size: cover;
} */
.main-bg {
  min-height: 100vh;
  height: 100vh;
  background: #f4f6fa;
}

.common-layout,
.el-container {
  height: 100vh;
}

.el-aside {
  height: 100vh !important;
  min-height: 100vh;
  background: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
  border-radius: 16px 0 0 16px;
  box-shadow: 2px 0 12px 0 rgba(0, 0, 0, 0.06);
  margin: 12px 0 12px 12px;
}

.el-main {
  min-height: 100vh;
  height: 100vh;
  background: #f9fafc;
  border-radius: 0 16px 16px 0;
  margin: 12px 12px 12px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 32px 40px;
}

.main-header {
  background: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(79, 140, 255, 0.1);
  margin: 12px 12px 0 12px;
}

.header-time {
  position: absolute;
  left: 32px;
  font-size: 15px;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  opacity: 0.85;
}

.header-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.username {
  margin: 0 8px;
  font-weight: 500;
  color: #fff;
  font-size: 16px;
}

.el-menu-vertical-demo {
  height: 100%;
  border-right: none;
  background: transparent;
  border-radius: 12px;
  margin-top: 16px;
  color: #fff;
}

.el-menu-vertical-demo .el-sub-menu__title {
  color: #fff !important;
}

.el-menu-vertical-demo .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-vertical-demo .el-menu-item {
  color: #fff !important;
  background: transparent !important;
}

.el-menu-vertical-demo .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-vertical-demo .el-menu-item.is-active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffd04b !important;
}

.el-menu-vertical-demo .el-menu-item {
  border-radius: 8px;
  margin: 4px 8px;
  transition: background 0.2s;
  color: #fff;
}

.el-menu-vertical-demo .el-menu-item.is-active {
  background: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
  color: #fff;
}

.el-menu-vertical-demo .el-menu-item-group__title {
  color: rgba(255, 255, 255, 0.7);
}

.el-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 8px 0 rgba(79, 140, 255, 0.1);
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  letter-spacing: 1px;
}

.welcome-message {
  margin: 20px 0 30px 0;
  font-size: 24px;
  font-weight: bold;
  color: #4f8cff;
  text-shadow: 1px 1px 6px #fff;
  letter-spacing: 1px;
}

.contact-service-btn {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 1000;
  background: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px 0 rgba(79, 140, 255, 0.1);
  font-weight: bold;
  letter-spacing: 1px;
}

.contact-service-btn {
  position: fixed;
  left: 32px;
  bottom: 32px;
  z-index: 1000;
  background: linear-gradient(90deg, #4f8cff 0%, #6fd6ff 100%);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px 0 rgba(79, 140, 255, 0.1);
  font-weight: bold;
  letter-spacing: 1px;
}
</style>
